<template>
  <div class="list-wrap">
    <a href="" class="link-item" v-for="(item, i) in arr" :key="i">
      <div class="main-block">
        <div class="avatar">
          <div class="img-bg"><img :src="item.img" alt="" /></div>
        </div>
        <div class="content-wrap">
          <div class="column-content">
            <div class="movie-title-wrap">
              <div class="movie-title">
                {{ item.nm }}
              </div>
              <span class="score-suffix" v-if="item.sc === 0">暂无评分</span>
              <span class="score" v-else
                >{{ item.sc }}<span style="color: #333">分</span></span
              >
            </div>
            <div class="detail-column">
              <div class="enm">{{ item.enm }}</div>
              <div class="cat">{{ item.cat }}</div>
              <div class="pubDesc">{{ item.pubDesc }}</div>
              <div class="actor">{{ item.desc }}</div>
              <span class="show-info">{{ item.showInfo }}</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "JingDian",
  data() {
    return {
      arr: [],
    };
  },
  async created() {
    let res = await this.$axios.get("./json/jingdian.json");
    this.arr = res.data.classicMovies.list;
  },
};
</script>

<style scoped>
.list-wrap {
  width: 10rem;
  height: auto;
  /* overflow-x: hidden; */
  margin-top: 165px;
}
a {
  text-decoration: none;
}
.score-suffix {
  float: right;
}
.movie-title-wrap .fen {
  float: right;
}
.movie-title-wrap .score {
  float: right;
  font-size: 15px;
  color: #faaf00;
}

.link-item {
  width: 9.6rem;
  height: 114px;
  padding-left: 15px;
  display: inline-block;
}

.main-block {
  width: 9.6rem;
  height: 114px;
  display: flex;
}

.avatar {
  width: 1.7067rem;
  height: 95px;
  display: inline-block;
}

.img-bg {
  width: 1.7067rem;
  height: 90px;
}

.img-bg img {
  width: 100%;
}

.content-wrap {
  width: 7.7333rem;
  height: 90px;
  padding: 1px 14px 12px 0px;
  margin-left: 10px;
  position: relative;
}

.column-content {
  width: 5.9733rem;
  height: 88px;
}

.movie-title-wrap {
  width: 6.84rem;
  height: 24px;
  margin-bottom: 2px;
  overflow: hidden;
}

.movie-title {
  height: 24px;
  display: inline-block;
  color: #333;
  font-size: 17px;
  font-weight: 700;
}
.detail-column {
  width: 5.84rem;
  height: 57px;
  display: inline-block;
}
.detail-column .enm,
.detail-column .cat,
.detail-column .pubDesc {
  margin-top: 5px;
}
.score-line {
  width: 5.84rem;
  height: 15px;
}

.score-line span:first-child {
  font-size: 13px;
  color: #666;
}

.score-line span:nth-child(2),
.detail-column .score-line .person {
  font-size: 15px;
  color: #faaf00;
  font-weight: 600;
}

.actor,
.show-info,
.detail-column .score-line .p-suffix {
  font-size: 13px;
  color: #666;
}

.actor {
  width: 5.84rem;
  height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-bottom: 5px;
}

.btn {
  width: 1.44rem;
  height: 28px;
  background-color: #f03d37;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.presale {
  width: 1.44rem;
  height: 28px;
  background-color: rgb(60, 159, 230);
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.wishs {
  position: absolute;
  bottom: 30px;
  color: #faaf00;
  font-size: 12px;
  font-weight: 700;
}
</style>